<template>
	<el-dialog v-model="showModal" :close-on-click-modal="false" custom="peak-dialog" :title="title" :width="900">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="100px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col :span="12">
					<el-form-item class="form-item" label="所属模块:" prop="apiMod">
						<dict-select v-model="paramsForm.apiMod" :dictKey="'sys_operate_module'" placeholder="请选择所属模块" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="接口名称:" prop="apiName">
						<el-input v-model="paramsForm.apiName" placeholder="请输入接口名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="接口地址:" prop="apiUrl">
						<el-input v-model="paramsForm.apiUrl" placeholder="请输入接口地址" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="权限字符:" prop="apiPerms">
						<el-input v-model="paramsForm.apiPerms" placeholder="请输入权限字符" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="显示顺序:" prop="orderNum">
						<el-input-number v-model="paramsForm.orderNum" class="el-form-item" controls-position="right" :max="50" :min="1" placeholder="请输入显示顺序" :step-strictly="true" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="备注信息:" prop="remark">
						<el-input v-model="paramsForm.remark" rows="3" type="textarea" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button :loading="loading" type="primary" @click="handleSure" v-throttle>确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import global from '@/utils/global'
import { toRefs } from 'vue'
const emit = defineEmits(['peak-modal-ok'])

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-15 11:07:25
 */

const state = reactive({
	showModal: false,
	paramsFormRef: null,
	title: '',
	roleList: [],
	paramsForm: {
		apiId: '',
		apiMod: '',
		apiName: '',
		apiUrl: '',
		apiPerms: '',
		remark: '',
		orderNum: 1,
	},
	loading: false,
	paramsRules: {
		apiMod: [{ required: true, message: '请选择所属模块', trigger: 'change' }],
		apiName: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
		apiUrl: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
	},
})

const { showModal, loading, title, paramsForm, paramsRules, paramsFormRef } = toRefs(state)

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-15 11:08:43
 */
const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	if (state.paramsForm.id) {
		//编辑
		state.loading = true
		global.$fetchPostData('/meta-system/web/v1/authApiInfo/edit', state.paramsForm).then(data => {
			state.loading = false
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	} else {
		state.loading = true
		global.$fetchPostData('/meta-system/web/v1/authApiInfo/add', state.paramsForm).then(data => {
			state.loading = false
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 1)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async row => {
	state.showModal = true
	await nextTick()
	state.paramsForm.id = ''
	if (row) {
		state.paramsFormRef.resetFields()
		getDataDetail(row.id)
		state.title = '编辑接口'
	} else {
		state.paramsFormRef.resetFields()
		state.title = '新增接口'
	}
}
const getDataDetail = id => {
	global.$fetchGetData('/meta-system/web/v1/authApiInfo/details', { id: id }).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data || {}
			state.paramsForm.orderNum = Number(data.data.orderNum)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped></style>
